{% extends 'base.html' %}

{% load staticfiles %}

{% block main %}
    <style>
        table{
    table-layout:fixed;
    empty-cells:show;
    border-collapse: collapse;
    margin:0 auto;
}
td{
    height:20px;
}
h1,h2,h3{
    font-size:12px;
    margin:0;
    padding:0;
}
.title { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
    .title h1 { line-height: 31px; text-align:center; background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
        .title th, .title td { border: 1px solid #CAD9EA; padding: 5px; }
/*这个是借鉴一个论坛的样式*/
table.t1{
    border:1px solid #cad9ea;
    color:#666;
}
table.t1 th {
    background-repeat:repeat-x;
    height:30px;
}
table.t1 td,table.t1 th{
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
table.t1 tr.a1{
    background-color:#f5fafe;
}

table.t2{
    border:1px solid #9db3c5;
    color:#666;
}
table.t2 th {
    background-repeat:repeat-x;
    height:30px;
    color:#fff;
}
table.t2 td{
    border:1px dotted #cad9ea;
    padding:0 2px 0;
}
table.t2 th{
    border:1px solid #a7d1fd;
    padding:0 2px 0;
}
table.t2 tr.a1{
    background-color:#e8f3fd;
}
table.t3{
    border:1px solid #fc58a6;
    color:#720337;
}
table.t3 th {
    background-repeat:repeat-x;
    height:30px;
    color:#35031b;
}
table.t3 td{
    border:1px dashed #feb8d9;
    padding:0 1.5em 0;
}
table.t3 th{
    border:1px solid #b9f9dc;
    padding:0 2px 0;
}
table.t3 tr.a1{
    background-color:#fbd8e8;
}
span{
    width: 100%;
    margin-left: 95%;
}
    </style>
    <form action="/staff/add/" method="post">
    {% csrf_token %}
        <table width="70%" id="mytab"  border="1" class="t1" align="center">
            <tr>
                <td>姓名:</td>
                <td><input type="text" id="s_name" name="s_name"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>
            <tr>
                <td>工号:</td>
                <td><input type="text" id="s_id" name="s_id"></td>
            </tr>
            <tr>
                <td>籍贯:</td>
                <td>
                    <select name="provinces">
                    {% for province in provinces %}
                        <option value="{{ province.id }}">{{ province.name }}</option>
                    {% endfor %}

					</select>
					<select name="citys">

                            <option>市辖区</option>

					</select>
					<select name="areas">
                            <option value="110101">东城区</option>

					</select>
                </td>
            </tr>
            <tr>
                <td>部门:</td>
                <td>
                    <select id="department_name" name="department_name">
                        <option value="" selected="selected">==请选择==</option>
                        <option value="组织部">组织部</option>
                        <option value="人事部">人事部</option>
                        <option value="财务部">财务部</option>
                        <option value="管理部">管理部</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>电话:</td>
                <td><input type="text" id="phone" name="phone"></td>
            </tr>
            <tr>
                <td>入职时间:</td>
                <td><input type="date" id="datetime" name="datetime"></td>
            </tr>
        </table>
    </form>

{% endblock main %}

{% block footerjs %}
    <script>
        $('select[name="provinces"]').change(function () {
            var provinceId = $(this).val()
            console.log(provinceId);
            $.ajax({
                type:'post',
                url:'/staff/add/',
                data:"provinceId="+provinceId+'&type=1&csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
                success:function (data) {
                    console.log(data.citys)
                    var citys_parent = $('select[name="citys"]')
                    citys_parent.empty()
                    for (var index = 0; index < data.citys.length; index++) {
                        var city = data.citys[index]
                        var r = '<option value="' + city.id + '">' + city.name + '</option>'
                        $(r).appendTo(citys_parent)
                    }
                    var areas_parent = $('select[name="areas"]')
                    areas_parent.empty()
                    for (var index = 0; index < data.areas.length; index++) {
                        var city = data.areas[index]
                        var r = '<option value="' + city.id + '">' + city.name + '</option>'
                        $(r).appendTo(areas_parent)
                    }
                }
            })
        })
        $('select[name="citys"]').change(function(){
            var cityid = $(this).val()
            $.ajax({
                type:'post',
                url:'/staff/add/',
                data:'cityId='+cityid+'&type=2&csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
                success:function(data){
                    var areas_parent = $('select[name="areas"]')
                    areas_parent.empty()
                    $.each(data.areas,function(index,area){
                         var r='<option value="'+area.id+'">'+area.name+'</option>'
                         $(r).appendTo(areas_parent)
                    })
                }
            })
        })
    </script>
{% endblock footerjs %}
